class Tab{
		constructor(str){
			//属性
			this.parent=document.querySelector(str);
			this.aBtnList=this.parent.querySelectorAll('input');
			this.aLiList=this.parent.querySelectorAll('li');
			//初始化事件
			this.show();
		}
		show(){
			let _this=this;
			for(let i=0; i<this.aBtnList.length;i++){
				this.aBtnList[i].onclick=function(){
					_this.index=i;
					_this.fn(i);
				};
			}
		}
		fn(i){
			// console.log(this);
			for(var j=0;j<this.aLiList.length;j++){
				this.aBtnList[j].className='';
				this.aLiList[j].className='';
			}
			this.aLiList[i].className='show';
			this.aBtnList[i].className='active';
		}
	}

	class AutoPlayTab extends Tab{
		constructor(str){
			//继承属性
			super(str);
			this.autoFn();
			this.index=0;
		}
		autoFn(){
			var _this=this;

			setInterval(function(){
					_this.index++;
					if(_this.index==_this.aBtnList.length){
						_this.index=0;
					}
					_this.fn(_this.index);
			},2000);
		}
	}


	class ZuoYou extends Tab{
 	 constructor(str){
 		 //继承属性
 		 super(str);

		 this.btn1 = document.getElementsByClassName("btn1")[0];
		 this.btn2 = document.getElementsByClassName("btn2")[0];
      this.anniu();
       this.index=0;
 	 }
 	 anniu(){
 		 var _this=this;
		 var btn1 = this.btn1;
     var btn2 = this.btn2;
     btn1.onclick = function(){
			//  alert(11)
			_this.index--;
			if(_this.index==-1){
				_this.index=_this.aBtnList.length-1;
			}
			_this.fn(_this.index);
		};
		 btn2.onclick = function(){
			//  alert(22);
			_this.index++;
			if(_this.index==_this.aBtnList.length){
				_this.index=0;
			}
			_this.fn(_this.index);
		};

 	 }
 }



	window.onload=function(){
		new Tab('#tab');
		new AutoPlayTab('#tab2');
		new ZuoYou("#tab3");

	}
